<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-vue的入门程序.html</title>
    <script src="js/vue.js"></script>

</head>
<!--
        vue的使用步骤:
        1、引入 vue.js 文件
        2、写html 内容、id 为 app
        3、在script标签中 new Vue({ })
        4、写业务逻辑
-->
<body>
<div id="app">
    <p> hello </p>
    <p>{{msg}}</p>
    <p>姓名:{{stu.name}}</p>
    <p>年龄:{{stu.age}}</p>
    <p>爱好:{{stu.hobby}}</p>
</div>

<script>
    /**
     * 注意事项:
     *   1、new Vue 的v要大小
     *   2、new Vue({})  括号不能写错了
     *   3、el 是作用的区域  必须是#id 选择器
     *   4、data的中的数据 在页面可以使用 插值表达式
     *        {{}}
     *
     */
    new Vue({
        el:"#app",          // 绑定vue的操作的区域
        data:{              // 页面的数据
            msg:"hello vue",
            stu:{
                name:"乔峰",
                age:"30",
                hobby:"打架"
            }
        }
    })

</script>

</body>
</html>